<template>
	<view>
		<!-- 题库练习 -->
		<u-navbar title="知识点练习" title-color="#fff" :background="background" back-icon-color="#ffffff"
			:back-text-style="{color: '#fff'}">
			<view class="slot-wrap">
				<!-- <u-icon name="list-dot" color="#ffffff" size="36" @click="changeModel"></u-icon> -->
			</view>
		</u-navbar>
		<view v-if="exerciseStats == -1" class="pickArea">
			<!-- <u-search class="searchBar" placeholder="搜索考试" v-model="keyword" :clearabled="true" @search="searchFunc"
				@custom="searchFunc" :show-action="true"></u-search> -->
			<view class="bankTitle">题库</view>
			<u-checkbox-group @change="bankBoxGroupChange">
				<u-checkbox @change="checkboxChange(item)" v-model="item.checked"
					v-for="(item, index) in bankValues.stores" :key="index" :name="item.id">{{item.name}}</u-checkbox>
			</u-checkbox-group>

			<view class="bankTitle">学科</view>
			<u-checkbox-group @change="subjectBoxGroupChange">
				<u-checkbox @change="" v-model="item.checked" v-for="(item, index) in bankValues.subjects" :key="index"
					:name="item.id">{{item.name}}</u-checkbox>
			</u-checkbox-group>

			<view class="bankTitle">章节</view>
			<u-checkbox-group @change="pointsBoxGroupChange">
				<u-checkbox @change="" v-model="item.checked" v-for="(item, index) in bankValues.points" :key="index"
					:name="item.id" v-if="knowSearch.subjectIds.indexOf(item.subjectId)>=0">{{item.name}}</u-checkbox>
			</u-checkbox-group>

			<view class="bankTitle">题型</view>
			<view class="typeArea">
				<view class="typeBox">
					<!-- 此处记得写最大值判断 -->
					<!-- <input class="inputBox" type="number" value="0" /> -->
					<u-input v-model="knowSearch.queType.single" type="number" input-align="center" value="0"
						placeholder="请输入题数" />
					<view class="numberShow">
						单选题：共{{this.questionSum.totalSingle}}道
					</view>
				</view>
				<view class="typeBox">
					<!-- <input class="inputBox" type="number" value="0" /> -->
					<u-input v-model="knowSearch.queType.multi" type="number" input-align="center" value="0"
						placeholder="请输入题数" required="required" />
					<view class="numberShow">
						多选题：共{{this.questionSum.totalMultiple}}道
					</view>
				</view>
				<view class="typeBox">
					<!-- <input class="inputBox" type="number" value="0" /> -->
					<u-input v-model="knowSearch.queType.judge" type="number" input-align="center" value="0"
						placeholder="请输入题数" />
					<view class="numberShow">
						判断题：共{{this.questionSum.totalJudgment}}道
					</view>
				</view>
				<view class="typeBox">
					<!-- <input class="inputBox" type="number" value="0" /> -->
					<u-input v-model="knowSearch.queType.fill" type="number" input-align="center" value="0"
						placeholder="请输入题数" />
					<view class="numberShow">
						填空题：共{{this.questionSum.totalCompletion}}道
					</view>
				</view>
				<view class="typeBox">
					<!-- <input class="inputBox" type="number" value="0" /> -->
					<u-input v-model="knowSearch.queType.mess" type="number" input-align="center" value="0"
						placeholder="请输入题数" />
					<view class="numberShow">
						简答题：共{{this.questionSum.totalShortAnswer}}道
					</view>
				</view>
			</view>

			<u-button type="primary" :ripple="true" @click="startPrac">开始练习</u-button>
		</view>

		<view v-else class="">
			<u-image width="100%" height="300rpx" :src="imageURL"></u-image>
			<view class="tipText">
				您有一场知识点练习正在进行中
			</view>
			<view class="btnArea">
				<u-button class="btnClass" type="success" :ripple="true" shape="circle" @click="continueExec">继续练习
				</u-button>
				<u-button class="btnClass" type="primary" :ripple="true" shape="circle" @click="reSetKnow">重置练习
				</u-button>
			</view>
		</view>
		<view>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				imageURL: '../../static/knowresult.jpg',
				background: {
					'background-image': 'linear-gradient(45deg, #007fd1, #013cd2)'
				},
				bankValues: {}, // 接收题库信息
				knowSearch: { // 记录筛选条件
					storeIds: '',
					subjectIds: '',
					examPointIds: '',
					queType: {
						single: 0,
						multi: 0,
						judge: 0,
						fill: 0,
						mess: 0
					}
				},
				questionSum: {
					totalSingle: 0,
					totalMultiple: 0,
					totalJudgment: 0,
					totalCompletion: 0,
					totalShortAnswer: 0,
				},
			};
		},
		computed: {
			exerciseStats() {
				return this.bankValues.exerciseId
			},
			queType() {
				return this.knowSearch
			}
		},
		watch: {
			queType(newVal, oldVal) {
				// console.log('hello');
				console.log(this.queType);
			}
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(item) {
				console.log('1:', item);
			},

			// 选中任一checkbox时，由checkbox-group触发
			// 题库多选
			bankBoxGroupChange(e) {
				console.log('0:', e);
				this.knowSearch.storeIds = e.join(",")
				// console.log(this.knowSearch.storeIds);
				this.$api.getQuestionSum(this.knowSearch)
					.then(res => {
						console.log(res);
						this.questionSum = res.values
						let that = this
						if (that.knowSearch.storeIds == '' && that.knowSearch.subjectIds == '' && that.knowSearch
							.examPointIds == '') {
							console.log('数组空啦');
							for (let item in that.questionSum) {
								that.questionSum[item] = 0
							}
						}
					})
			},
			// 学科多选
			subjectBoxGroupChange(e) {
				// console.log('0:',e);
				this.knowSearch.subjectIds = e.join(",")
				// console.log(this.knowSearch.subjectIds);
				this.$api.getQuestionSum(this.knowSearch)
					.then(res => {
						console.log(res);
						this.questionSum = res.values
						let that = this
						if (that.knowSearch.storeIds == '' && that.knowSearch.subjectIds == '' && that.knowSearch
							.examPointIds == '') {
							console.log('数组空啦');
							for (let item in that.questionSum) {
								that.questionSum[item] = 0
							}
						}
					})
			},
			// 章节多选
			pointsBoxGroupChange(e) {
				console.log('0:', e);
				this.knowSearch.examPointIds = e.join(",")
				// console.log(this.knowSearch.examPointIds);
				// console.log(this.knowSearch);
				this.$api.getQuestionSum(this.knowSearch)
					.then(res => {
						console.log(res);
						this.questionSum = res.values
						let that = this
						if (that.knowSearch.storeIds == '' && that.knowSearch.subjectIds == '' && that.knowSearch
							.examPointIds == '') {
							console.log('数组空啦');
							for (let item in that.questionSum) {
								that.questionSum[item] = 0
							}
						}
					})
			},
			// 全选
			checkedAll() {
				this.list.map(val => {
					val.checked = true;
				})
			},

			// 开始知识点练习
			startPrac() {
				var isZero = (this.knowSearch.queType.single.toString() == '0') && (this.knowSearch.queType.multi
				.toString() == '0') && (this.knowSearch.queType.judge.toString() == '0') && (this.knowSearch.queType
					.fill.toString() == '0') && (this.knowSearch.queType.mess.toString() == '0')
				var haveNone = (this.knowSearch.queType.single.toString() == '') || (this.knowSearch.queType.multi
					.toString() == '') || (this.knowSearch.queType.judge.toString() == '') || (this.knowSearch.queType
					.fill.toString() == '') || (this.knowSearch.queType.mess.toString() == '')
				if (isZero) {
					this.$refs.uToast.show({
						title: '请至少选择一题',
						type: 'warning'
					})
				} else if ((this.knowSearch.queType.single > this.questionSum.totalSingle) || (this.knowSearch.queType
						.multi > this.questionSum.totalMultiple) || (this.knowSearch.queType.judge > this.questionSum
						.totalJudgment) || (this.knowSearch.queType.fill > this.questionSum.totalCompletion) || (this
						.knowSearch.queType.mess > this.questionSum.totalShortAnswer)) {
					this.$refs.uToast.show({
						title: '选择的题数超出最大值',
						type: 'warning'
					})
				} else if (haveNone) {
					this.$refs.uToast.show({
						title: '题型每项必填',
						type: 'warning'
					})
				} else {
					this.$u.route('/pages/exam/examTextPage', {
						knowSearch: encodeURIComponent(JSON.stringify(this.knowSearch)),
						examType: 'know',
					})
				}
			},

			// 继续练习
			continueExec() {
				// this.$api.startKnow()
				this.$u.route('/pages/exam/examTextPage', {
					knowSearch: encodeURIComponent(JSON.stringify(this.knowSearch)),
					examType: 'know',
				})
			},

			// 重置练习
			reSetKnow() {
				this.$api.reSetKnow()
					.then(res => {
						console.log('重置结果：', res);
						this.$api.getChapter()
							.then(res => {
								this.bankValues = res.values
								console.log(this.bankValues);
							})
					})
			}
		},

		onLoad() {
			this.$api.getChapter()
				.then(res => {
					this.bankValues = res.values
					console.log(this.bankValues);
				})
		}
	};
</script>

<style lang="scss">
	.searchBar {
		padding: 20upx;
	}

	.pickArea {
		margin: 0 45upx;

		.bankTitle {
			font-size: 36rpx;
			font-weight: bold;
			color: $theme-color;
		}

		.typeArea {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.typeBox {
				width: 300upx;
				padding: 10upx;
				border-radius: 15upx;
				border: solid #c2d4df 2px;
				margin: 10upx;

				// .inputBox {
				// 	text-align: center;
				// }

				.numberShow {
					border-radius: 10upx;
					text-align: center;
					padding: 6upx;
					color: #FFFFFF;
					background-color: #00d196;
				}
			}
		}

	}

	.tipText {
		font-size: 34rpx;
		text-align: center;
		margin: 100rpx 0;
	}

	.btnArea {
		display: flex;
		margin-top: 50rpx;

		.btnClass {
			width: 300rpx;
		}
	}
</style>
